<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!--    <link rel="stylesheet" th:href="@{/css/index.css}">-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        body {
            position: relative;
        }

        /*==首页css*/
        .bbsheader {
            height: 55px;
            background-color: #42bb44;
        }

        .reserch input {
            /*width: 300px;*/
            background-color: #af3ece;
        }

        .inputgroup input {
            border-radius: 20px;
        }

        .reserchgroup {
            /*border: 2px solid rebeccapurple;*/
        }

        .reserchgroup input, button {
            height: 35px;
            border-radius: 20px;
            background-color: #5fd061;
            border: none;
            outline: none;
            margin-top: 10px;

        }

        .rightnav {
            margin-top: 10px;
            /*margin-left: 80px;*/
        }

        .login-div {
            margin-left: 10px;
            font-size: 14px;
            display: block;
            width: 110px;
            height: 33px;
            line-height: 33px;
            padding-left: 15px;
            background: #e1e1e1;
            border-radius: 100px;
        }

        .login-div a {
            text-decoration: none;
        }

        .login-div a:hover {
            color: #2e6da4;
            font-weight: bolder;
            cursor: pointer;
        }


        .rightnav img {
            margin-left: 60px;
            width: 40px;
            height: 40px;
            background-color: white;
            cursor: pointer;
        }

        .rightnav img:hover {
            border: 1px solid blueviolet;
        }


        .avtorlist {
            width: 180px;
            text-align: center;
            background-color: #ffffff;
        }

        .avtorlist b {
            color: #1b6d85;
            font-weight: bolder;
        }

        .avtorlist a {
            color: #565657;
        }

        /**/


        .bbslogo {
            float: left;
            width: 100px;
            height: 44px;
            margin-left: 100px;
            margin-right: 50px;
        }

        .bbstabs {
            font-size: large;
            border: none;
        }
        .bbstabs ul{
            border: none;
        }

        .dropdown a {
            width: 160px;
            text-align: center;
        }

        .bbsmoremenu {
            border: none;
            width: 160px;
        }

        /*    ===login css*/

        #logindiv {
            position: absolute;
            top: 50%;
            width: 40%;
            left: 30%;
            height: 400px;
            border-radius: 10px;
            background-color: #f6f6f6;
        }

        .cancellogin {
            /*border: 1px solid green;*/
            border: none;
            outline: none;
            width: 40px;
            height: 10%;
            margin: 5px 5px auto 95%;
            opacity: 0.3;
            color: #1b6d85;
        }

        .loginrow {
            height: 90%;
        }

        .loginrow div {
            height: 100%;
        }


        #login_form {
            margin: 20px auto auto auto;
            /*border: 1px solid green;*/
        }

        #login_form [class='logininput'] {
            margin: 20px 5px auto 5px;
        }

        .loginhead h3 {
            margin: 2px auto 2px auto;
            text-align: center;
            color: #7099bf;
        }

        .logininput input, .loginbutton input {
            width: 60%;
            height: 30px;
            margin-left: 20%;
            border-radius: 5px;
            border: none;
        }

        .logintip, .registtip {
            margin-top: 10px;
        }


        .logintip a {
            text-decoration: none;
            float: right;
            margin-right: 66px;
        }

        .logintip div {
            float: left;
            margin-left: 33px;
            font-size: smaller;
            color: red;
            margin-top: 1px;
        }

        .registtip div {
            float: left;
            margin-left: 33px;
            font-size: smaller;
            color: #24ac1f;
            margin-top: 1px;
        }

        .loginbutton [id="loginbtn"] {
            margin-top: 40px;
            color: #939090;
        }

        .loginbutton [id="loginbtn"]:hover {
            background-color: #b30707;
            color: white;
        }

        .loginbutton [id="registerbtn"] {
            margin-top: 40px;
            color: #eeecec;
            background-color: #6ace6f;
        }

        .loginbottom {
            width: 50%;
            height: 30px;
            margin-left: 25%;
            margin-top: 80px;
        }

        .loginbottom a {
            text-decoration: none;
            margin: auto 5px auto auto;
            cursor: pointer;
        }

        .loginbottom img {
            width: 20px;
            height: 20px;
            /*margin-left: 10px;*/
            margin: auto 5px auto auto;
        }

        #leftpart div {
            /*background: url(img/bg.jpg) no-repeat;*/
            background-color: #91dc94;
            opacity: 0.6;
            background-size: cover;
            font-size: 16px;
            border-radius: 5px;
            margin-left: 0px;
        }

        #leftpart canvas {
            top: 0;
            left: 0;
            z-index: -1;
            pointer-events: none;
            height: 100%;
            width: 100%;
        }

    </style>

</head>
<body>

<!--navbar-->
<div th:replace="public.html::bbsheadnav('disease')"></div>

<!--login-->
<div class="container-fluid" id="logindiv" style="display: none">
    <div>
        <button type="button" class="cancellogin" onclick="closelogin()">X</button>
    </div>
    <div class="row loginrow">
        <div class="col-md-6" id="leftpart">
            <div>
                <canvas id="snowfall"></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <form id="login_form">
                <div class="loginhead">
                    <h3 class="form-title">Login to your account</h3>
                </div>
                <div class="logininput">
                    <input type="text" placeholder="用户名" id="username" autofocus="autofocus" maxlength="20" required/>
                </div>
                <div class="logininput">
                    <input type="password" placeholder="密码" id="password" maxlength="18"/>
                </div>
                <div class="logininput" id="rpassdiv" style="display: none">
                    <input type="password" placeholder="确认密码" id="rpassword"
                           maxlength="18" required/>
                </div>
                <div class="logintip" id="logintipdiv">
                    <div id="loginwaring"></div>
                    <a href="#">忘记密码</a>
                </div>
                <div class="registtip" id="registtipdiv" style="display:none;">
                    <div id="registwaring">xxxxxx</div>
                </div>
                <div class="loginbutton" id="loginbtndiv">
                    <input type="button" id="loginbtn" value="登录" onclick="tologin()"/>
                </div>
                <div class="loginbutton" id="registerdiv" style="display: none">
                    <input type="button" id="registerbtn" value="注册" onclick="toregister()"/>
                </div>

                <div class="loginbottom" id="bottomdiv">
                    <a onclick="register()">注册</a>
                    <img th:src="@{/img/login/qq.png}" class="img-circle">
                    <img th:src="@{/img/login/wechat.png}" class="img-circle">
                    <img th:src="@{/img/login/in.png}" lass="img-circle">
                    <img th:src="@{/img/login/in.png}" lass="img-circle">
                </div>
            </form>
        </div>
    </div>
</div>

</body>
<!--<script type="text/javascript">-->
<!--    var islogin = '';-->

<!--    function loginmodal() {-->
<!--        islogin = 'true';-->
<!--        $("#username").val('');-->
<!--        $("#password").val('');-->
<!--        $("#rpassword").val('');-->
<!--        document.getElementById('rpassdiv').style.display = 'none';-->
<!--        document.getElementById('logintipdiv').style.display = 'block';-->
<!--        document.getElementById('registtipdiv').style.display = 'none';-->
<!--        document.getElementById('loginbtndiv').style.display = 'block';-->
<!--        document.getElementById('registerdiv').style.display = 'none';-->
<!--        document.getElementById('logindiv').style.display = 'block';-->
<!--        $("#bottomdiv").css("margin-top", "80px");-->
<!--        $("#registwaring").html("<div>6位起且字符数字字母至少两者</div>")-->
<!--        $("#loginwaring").html("");-->
<!--    }-->

<!--    function closelogin() {-->
<!--        document.getElementById('logindiv').style.display = 'none';-->
<!--    }-->

<!--    function tologin() {-->
<!--        var username = $("#username").val();-->
<!--        var password = $("#password").val();-->
<!--        $.ajax({-->
<!--            type: 'post',-->
<!--            url: '/tologin',-->
<!--            contentType: "application/json",-->
<!--            data: JSON.stringify({-->
<!--                username: username,-->
<!--                password: password-->
<!--            }),-->
<!--            success: function (rescode) {-->
<!--                if (rescode == "200") {-->
<!--                    window.location.href = '/login';-->
<!--                } else {-->
<!--                    $("#loginwaring").html("用户或密码出错");-->
<!--                }-->
<!--            },-->
<!--            error: function () {-->
<!--                alert("失败")-->
<!--            }-->
<!--        });-->
<!--    }-->

<!--    function register() {-->
<!--        islogin = 'false';-->
<!--        $("#username").val('');-->
<!--        $("#password").val('');-->
<!--        $("#bottomdiv").css("margin-top", "40px");-->
<!--        document.getElementById('rpassdiv').style.display = 'block';-->
<!--        document.getElementById('registtipdiv').style.display = 'block';-->
<!--        document.getElementById('registerdiv').style.display = 'block';-->
<!--        document.getElementById('logintipdiv').style.display = 'none';-->
<!--        document.getElementById('loginbtndiv').style.display = 'none';-->
<!--    }-->


<!--    function toregister() {-->
<!--        $.ajax({-->
<!--            type: 'post',-->
<!--            url: '/toregister',-->
<!--            contentType: "application/json",-->
<!--            data: JSON.stringify({-->
<!--                username: $("#username").val(),-->
<!--                password: $("#password").val()-->
<!--            }),-->
<!--            success: function (rescode) {-->
<!--                alert(rescode)-->
<!--                if (rescode == "200") {-->
<!--                    window.location.href = '/login';-->
<!--                } else if (rescode == "400") {-->
<!--                    $('#registwaring').html("<div style=\"color: red\">用户名存在</div>")-->
<!--                } else {-->
<!--                    $('#registwaring').html("<div style=\"color: red\">注册失败</div>")-->
<!--                }-->
<!--            },-->
<!--            error: function () {-->
<!--                alert("失败")-->
<!--            }-->
<!--        });-->
<!--    }-->

<!--    var pattern = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,}$/-->
<!--    $(document).ready(function () {-->
<!--        $("#password").keyup(function () {-->
<!--            if (islogin == "false") {-->
<!--                if ($("#password").val().length < 6)-->
<!--                    $('#registwaring').html("<div style=\"color: red\">长度至少6位</div>")-->
<!--                else if (!pattern.test($("#password").val()))-->
<!--                    $('#registwaring').html("<div style=\"color: red\">不符合2/3规则</div>")-->
<!--                else-->
<!--                    $('#registwaring').html("<div style=\"color: green\">正确</div>")-->
<!--            }-->
<!--        });-->

<!--        $("#rpassword").keyup(function () {-->
<!--            if (islogin == "false") {-->
<!--                if ($("#rpassword").val() != $("#password").val())-->
<!--                    $('#registwaring').html("<div style=\"color: red\">输入不一致</div>")-->
<!--                else-->
<!--                    $('#registwaring').html("<div style=\"color: green\">正确</div>")-->
<!--            }-->
<!--        });-->
<!--    })-->

<!--    function avtorliston() {-->
<!--        $("#avtorimg").click();-->
<!--    }-->

<!--    function avtorlistoff() {-->
<!--        $("#avtorimg").click();-->
<!--    }-->
<!--</script>-->
<script th:src="@{/js/snowfall.js}"></script>
<script th:src="@{/js/public.js}"></script>

</html>
